<template>
  <div class="index-container">
    <SwitchSubject></SwitchSubject>
    <van-tabs :swipe-threshold="1" v-model="active" sticky swipeable @change="tabsChange">
      <van-tab v-for="(itme, index) in cateList" :key="index" :title="itme.name">
        <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
          <div class="headline_three clearfix">
            <van-list
              :loading="loading"
              :finished="finished"
              finished-text="暂时没有更多了哦~"
              @load="onLoad"
            >
              <div
                class="headline_three_banxing"
                v-for="(item, index) in newsList"
                :key="index"
                @click="toRegisterGuide(item)"
              >
                <div class="banxing">
                  <div class="imgs">
                    <img v-lazy="item.img || require('@/assets/images/zxzwt.png')" alt />
                  </div>
                  <div>
                    <div class="banxing_title">{{ item.title }}</div>
                    <div class="grid_time">
                      <span>
                        <van-icon name="underway-o" />
                        <i>{{ item.addtime }}</i>
                      </span>
                      <span>
                        <van-icon name="eye-o" />
                        <i>{{ item.view_num }}</i>
                      </span>
                    </div>
                  </div>
                </div>
                <van-divider class="divider" />
              </div>
            </van-list>
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <div class="top" @click="toTop()">
      <van-icon name="arrow-up" />
      <div style="line-height: 10px">顶部</div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import SwitchSubject from '@/components/SwitchSubject'
import { getFind } from '@/api/news/index'
export default {
  components: {
    SwitchSubject
  },
  data() {
    return {
      active: 0,
      queryParams: {
        subject_id: null,
        page: 1,
        size: 10
      },
      cateList: [],
      newsList: [],
      total: 1,
      loading: false,
      finished: false,
      isLoading: false // 下来刷新
    }
  },

  computed: {},

  mounted() {
    this.queryParams.subject_id = this.$route.query.subject_id || 2
    this.fetchList()
    // this.$getWxApplets(window.location.href)
    // 此处true 需要加上 不加滚动事件可能绑定不成功
    window.addEventListener('scroll', this.handleScroll, true)
    if (this.$store.state.user.token) {
      this.xrlbShow = false
    }
  },

  methods: {
    // 获取首页数据
    fetchList() {
      this.newsList = []
      this.finished = false
      this.queryParams.page = 1
      this.onLoad()
    },
    async onLoad() {
      this.loading = true
      await getFind(this.queryParams).then(res => {
        this.cateList = res.data.cates
        const news = res.data.news
        news.map(b => {
          b.addtime = moment(b.addtime * 1000).format('YYYY-MM-DD')
        })
        this.newsList = this.newsList.concat(news)
        this.queryParams.page = this.queryParams.page + 1
        console.log(this.newsList)
        if (res.data.news < 10) {
          this.finished = true
        }
      })
      this.loading = false
      this.isLoading = false
    },
    onRefresh() {
      this.fetchList()
    },
    tabsChange(id) {
      if (this.cateList[id].type === 'guide') {
        this.$router.push({ path: '/register-guide' })
      } else {
        this.queryParams.cate_id = this.cateList[id].id
        this.fetchList()
      }
    },
    toRegisterGuide(row) {
      this.$router.push({
        path: '/information-details',
        query: { id: row.id, subject_id: this.queryParams.subject_id }
      })
    },
    handleScroll() {
      const scrolltop = document.documentElement.scrolltop || document.body.scrollTop
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false)
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  background: #ffffff;
}
::v-deep .van-tab__text {
  font-size: 16px;
}
::v-deep .van-tabs__content {
  min-height: calc(100vh - 150px);
}

.headline_three {
  margin: 20px 15px 15px;
  // padding: 10px 10px 15px;
  .banxing {
    display: flex;
    .imgs {
      margin-right: 9px;
      img {
        width: 112px;
        height: 75px;
        border-radius: 5px;
        overflow: hidden;
      }
    }
  }
  .divider {
    height: 0.5px;
    margin: 5px 0px 15px;
  }
  .banxing_title {
    // height: 40px;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    @include textoverflow(2);
  }
  .grid_time {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    .van-icon {
      // vertical-align: middle;
      // margin-bottom: 2px;
      margin-right: 5px;
    }
  }
  .banxing_zhixun {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
    line-height: 30px;
    span {
      font-size: 12px;
      font-weight: 500;
      color: #999999;
      line-height: 30px;
    }
  }
}
.headline_three_banxing:last-child .divider {
  display: none;
}

.top {
  position: fixed;
  right: 15px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(0deg, #009697, #00afaf);
  border-radius: 50%;
  .van-icon {
    margin-top: 6px;
    font-size: 19px;
  }
}
</style>
